import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 引入组件
// 目的：按需加载组件，看谁加载谁，不看就不加载——懒加载。将vue的异步组件和代码分隔结合
const layout = () => import ('../views/layout')
const home = () => import ('../views/home')
const cate = () => import ('../views/cate')
const cart = () => import ('../views/cart')
const mime = () => import ('../views/mime')
const detail = () => import ('../views/detail')
const goodsdetail = () => import ('../views/goodsdetail')
// import layout from '../views/layout'
// import home from '../views/home'
// import cate from '../views/cate'
// import cart from '../views/cart'
// import mime from '../views/mime'
// import detail from '../views/detail'
// import goodsdetail from '../views/goodsdetail'
const routes = [
  {
    // 命名视图，和app中的多个router-view搭配使用
    // components:{
    //   left: layout,
    //   right: layout
    path:'/index',
    component: layout,
    // 二级路由规则配置
    children:[
      {
        path:'home',
        component:home,
        meta: {
          title: '首页'
        },
        // 路由独享的守卫
        beforeEnter: (to, from, next) => {
          // 如果登录了，就进入首页；没有登录就进入mime页面
          // 登录信息放在localstoreage中，手动修改isLogin的true和false，查看效果
          let isLogin = JSON.parse(localStorage.getItem('isLogin'));
          if(isLogin) {
            // next不传参数及时正常跳转
            next()
          }else {
            // 传参就跳到指定页面
            next('/index/mime')
          }
        }
      },
      {
        path:'cate',
        component:cate,
        meta: {
          title: '分类'
        }
      },
      {
        path:'cart',
        component:cart,
        meta: {
          title: '购物车'
        }
      },
      {
        path:'mime',
        component:mime,
        meta: {
          title: '我的'
        }
      },
      {
        path:'/index',
        redirect:'/index/home'
      }
    ]
  },
  {
    // 商品详情页
    path: '/detail',
    name: 'de',
    component: detail,
    meta: {
      title: '商品详情-1'
    }
  },
  {
    // 商品详情页动态路由版,加冒号表示name是一个变量
    path: '/goodsdetail/:sku/:price',
    component: goodsdetail,
    meta: {
      title: '商品详情-2'
    }
  },
  {
    path:'*',
    redirect:'/index',
  }
]


// router是vue路由的实例
const router = new VueRouter({
  // 修改路由模式，默认是哈希模式，改为history模式
  mode:'history',
  // 路由表
  routes,
  // 滚动行为
  scrollBehavior (to, from, savedPosition) {
    // savedPosition保持位置，在使用原生浏览器是生效
    if(savedPosition) {
      return savedPosition
    }else {
      // 切换页面是，回到左上角的位置
      return {x: 0, y: 0}

    }
  }
})
// 全局前置路由守卫（常用）
router.beforeEach((to, from, next) => {
  // to要进入的路由对象(route)
  // from要离开的路由对象(route)
  // console.log(1, to);
  // console.log(2, from);
  document.title = to.meta.title || 'u-shop'
  // console.log('我要进入页面了');
  // 向后传递执行权，使代码继续执行
  next()
})
// 全局后置路由守卫
// router.afterEach((to, from) => {
//   console.log(to);
//   console.log(from);
//   console.log('我要离开页面了');
// })
// 全局解析守卫
// router.beforeResolve((to, from, next) => {
//   console.log('我要解析页面了');
//   next()
// })
// 解决$router.push导航到当前页面报错的奇葩问题...
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default router
